<template>
  <div class="wrapper">
    <header>
      <Back></Back>
      <div style="flex-grow: 1; text-align: center;">
        <p>吃货豆</p>
      </div>
    </header>
    <!-- header部分 -->
    <li class="points">
      <p><img src="../assets/points.jpg" />{{ credit_copy.creditNum }}</p>
      <ul>吃货豆有效期7天，记得使用哟 <i class="fa fa-question-circle-o"></i></ul>
    </li>
    <h3>积分明细：</h3>

    <div class="table">
      <table class="listTab" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
          <th>序号</th>
          <th class='type'>增加/减少</th>
          <th class='number'>变动数目</th>
          <th class='createTime'>获得时间</th>
          <th class='expiredTime'>过期时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in Arrcredit" :key="index">
          <td>{{ index + 1 }}</td>
          <td>
            <span :class="item.channelType === 1 ? 'red' : 'green'" v-text="isType(item.channelType)"></span>
          </td>
          <td>{{ item.num }}</td>
          <td>{{ item.createTime }}</td>
          <td>{{ item.expiredTime == null ? '无' : item.expiredTime }}</td>
        </tr>
        </tbody>
      </table>
      <div v-if="Arrcredit.length === 0" class="no-data">
        暂无积分明细
      </div>
    </div>
  </div>
</template>
<script>
import Footer from '../components/Footer.vue';
import Back from "@/components/Back.vue";

export default {
  name: 'Credit',
  components: {
    Back,
    Footer: Footer
  },
  data() {
    return {
      Arrcredit: [],
      user: {},
      userId: this.$route.query.userId,
      credit_copy: {}
    };
  },
  created() {
    this.user = this.$getSessionStorage('user');
    this.fetchCreditDetails();
    this.fetchTotalCredit();
  },
  methods: {
    fetchCreditDetails() {
      let url = `Credit/userId/${this.user.userId}`;
      this.$axios.get(url)
          .then(response => {
            this.Arrcredit = response.data.result;
          })
          .catch(error => {
            console.error('获取积分明细失败:', error);
          });
    },
    fetchTotalCredit() {
      let url = `Credit/getTotalCreditByUserId/${this.user.userId}`;
      this.$axios.get(url)
          .then(response => {
            this.credit_copy.creditNum = response.data.result;
          })
          .catch(error => {
            console.error('获取总积分失败:', error);
          });
    },
    isType(type) {
      if (type === 0) return '增加';
      else if (type === 1) return '减少';
      else return '';
    }
  }
};
</script>
<style scoped>
/*************** 总容器 ***************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/*************** Header ***************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2vw;
  box-sizing: border-box;
}

.wrapper header .back-button {
  width: 10vw;
  height: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper header .title {
  flex-grow: 1;
  text-align: center;
}

/*************** 积分部分 ***************/
.wrapper .points {
  width: 100%;
  height: 40vw;
  background-color: #fff;
  padding-top: 12vw;
  box-sizing: border-box;
}

.wrapper .points p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12vw;
  color: #666;
}

.wrapper .points p img {
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  margin-right: 2vw;
}

.wrapper .points ul {
  font-size: 2.8vw;
  color: #666;
  text-align: center;
  margin-top: 2vw;
}

/*************** 积分明细标题 ***************/
.wrapper h3 {
  margin-top: 3vw;
  margin-bottom: 2vw;
  border-top: solid 1px #cecece;
  background-color: #fff;
  font-size: 4vw;
  font-weight: 300;
  color: #999;
  padding: 0 2vw;
  box-sizing: border-box;
}

/*************** 表格部分 ***************/
.wrapper .table {
  padding-bottom: 14vw;
  width: 96%;
  margin: 0 auto;
  overflow-x: auto;
  background-color: #e3e3e3;
  border-collapse: collapse;
}

.wrapper .table .listTab {
  width: 100%;
  font-size: 14px;
  color: #666;
  border: 1px solid #bcbcbd;
  background-color: #f2f3ff;
}

.wrapper .table.listTab thead > th {
  background-color: #ecf0f4;
  padding: 12px 14px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #ff5500;
  min-width: 100px;
  color: #292d31;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wrapper .table.listTab th.check {
  min-width: 20px;
}

.wrapper .table.listTab tbody > tr.check {
  background-color: #dfeefc;
}

.wrapper .table.listTab tbody > tr td {
  padding: 16px 8px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #ececed;
  vertical-align: middle;
  word-break: break-all;
  min-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wrapper .table.listTab tbody > tr td input {
  border: 1px solid #248bfc;
}

.wrapper .table.listTab tbody > tr td .green {
  color: #72d34b;
  font-weight: bold;
}

.wrapper .table.listTab tbody > tr td .red {
  color: #f00;
  font-weight: bold;
}

/*************** 空数据提示 ***************/
.wrapper .no-data {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-top: 20px;
}
</style>